<template>
  <div>
    <el-card style="margin: 0 auto; margin-bottom: 0px">
      <div slot="header" class="Card-Top">
        <h1 style="display: inline;">管理员登录</h1>
      </div>
      <div class="loginBox">
        <el-form :model="loginForm" ref="loginForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="帐户"
          prop="user"
          :rules="[
            { required: true, message: '帐户不能为空'}
          ]"
        >
          <el-input type="text" v-model.number="loginForm.user" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="pwd"
          :rules="[
            { required: true, message: '密码不能为空'}
          ]"
        >
          <el-input type="password" v-model.number="loginForm.pwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="display: flex;justify-content: center;" class="loginBtn">
            <el-button type="primary" @click="loginGo()">登录</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
// 登录接口
// import { login } from '@/api/login'

export default {
  name: 'AdminPage',
  data () {
    return {
      loginForm: {
        user: '',
        pwd: ''
      }
    }
  },
  destroyed () {
    location.reload()
  },
  methods: {
    async loginGo () {
      await this.$store.dispatch('user/login', this.loginForm)
      if (this.$store.state.user.token.token !== null) {
        this.$router.push('/home')
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  width: 1000px;
}

::v-deep .el-tabs__active-bar{
  height: 7px;
  background-color:rgb(150, 60, 0) !important;
  border-radius: 3.5px;
}

::v-deep .el-card__header{
  padding:0px 20px;
}
.Card-Top{
  height: 40px;
}

.loginBox{
  width: 50%;
  margin: 100px auto;
}

::v-deep .loginBtn .el-button{
  width: 200px !important;
}
</style>
